<template>
  <el-row class="el-center">
    <el-row class="el-main-list">
      <table-list :tabHeader="tablehrader" />
    </el-row>
    <el-row class="el-footers">
      <footer-page 
        :size-change="sizeChange"
        :current-change="currentChange"
        :page-sizes="[1, 2, 3, 4]" 
        :current-page="listQuery.currentPage" 
        :page-size="listQuery.pageSize" 
        :layout="'total, sizes, prev, pager, next, jumper'" 
        :total="listQuery.total" 
        :background="true"  />
    </el-row>
  </el-row>
</template>
<script>
import tableList from '@/components/tabList/index'
import footerPage from '@/components/pagination'
// import axios from 'axios'
import { query } from '@/api/ceshi'
import { tablehrader } from './components/defJson'
export default {
  components: {
    tableList,
    footerPage
  },
  filters: {
    tablehrader
  },
  created() {
    this.query()
  },
  activated: function() {
    this.query()
  },
  data() {
    return {
      // dataList: [],
      tablehrader: tablehrader,
      listQuery: {
        pageSize: undefined,
        total: undefined,
        currentPage: undefined
      }
    }
  },
  methods: {
    query() {
       query(this.listQuery).then(res => {
        // this.dataList = res.list
        this.$store.dispatch('tableListQuery', res.data)
        this.listQuery.pageSize = res.data.pagesize
        this.listQuery.total = res.data.count
        this.listQuery.currentPage = res.data.pagenum
      })
    },
    sizeChange(e) {
      console.log(e, 111111111111)
      this.listQuery.pageSize = e
      this.query()
    },
    currentChange(e) {
      console.log(e, 2222222222222)
      this.listQuery.currentPage = e
      this.query()
    }
  }
}
</script>
